<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Vue3 | Layout</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body>
<div id="app">

  <!-- 顶部页头 -->
  <nav ref="header" class="main-header navbar navbar-expand navbar-white navbar-light" style="min-height:3.5rem;">
    Header
  </nav>

  <!-- 左侧菜单 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <p style="color:white;">SideBar</p>
  </aside>

  <!-- 工作区 -->
  <div class="content-wrapper">
    Content
  </div>

  <!-- 底部页脚 -->
  <footer class="main-footer" style="min-height:3.5rem;">
    Footer
  </footer>
  
</div>
<!-- ./wrapper -->
<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
	if (typeof Vue == 'undefined') {
		var script= document.createElement("script");
		script.type = "text/javascript";
		script.src="js/vue.global.3.2.26.js";
		//script.setAttribute('sync', true);
		document.body.appendChild(script);
	}
</script>
<script type="text/javascript">
	window.onload = () => {
		Vue.createApp({
		setup(props) {
			const header = Vue.ref(null);

			Vue.onBeforeMount(() => {
				// 阻止动画效果
				document.body.classList.add("hold-transition")
				// 最小化sidebar
				document.body.classList.add("sidebar-mini")
			})

			Vue.onMounted(()=> {
				console.log('onMounted', header.value)
				// 为父组件添加样式，该样式是adminlte的关键样式之一
				header.value.parentNode.classList.add("wrapper")
				document.body.classList.remove("hold-transition")
			})

			return {
				header,
			}
		}
	  }).mount('#app');
	}
</script>
</body>
</html>
